<template>
  <div class="pj_stage elm-edit">
    <elm-page-bb>
      <el-card shadow="hover">
        <div slot="header">
          <span>整体信息</span>
        </div>
        <el-form ref="model" :model="model" size="small" label-width="80px">
          <elm-row>
            <el-form-item label="整体进度" prop="progress" :rules="[{trigger: 'blur' ,validator: validateNumber}]">
              <el-input v-model.number="model.progress">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="完工日期">
              <el-date-picker v-model="model.b_edate" value-format="yyyy-MM-dd" type="date" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </elm-row>
        </el-form>
      </el-card>
      <el-card shadow="hover" class="yxjd" style="height: calc(100% - 115px)">
        <div slot="header">
          <span>运行节点</span>
        </div>
        <elm-page-lr width="200px">
          <template #left>
            <elm-page-tb style="padding: 0px;" :splite="false" :splite-show="false" :top-show="false" height="0px">
              <elm-table-tree ref="tree" url="/business/my/business/GetInsStageData" :post-data="{ pj_id:request.pj_id }"
                              :show-header="false" style="user-select:none;" @change="loadData"
                              @row-click="rowClick" :default-expand-all="true" height="100%" :page-size="9999">
                <el-table-column>
                  <template v-slot="scope">
                    <template v-if="scope.row.children">
                      <i class="el-icon-folder-opened" style="color:#0094ff;"></i>
                    </template>
                    <template v-else>
                      <i class="el-icon-tickets" style="color:#0094ff;"></i>
                    </template>
                    {{ scope.row.name }}
                    <span class="stage-state active" v-if="scope.row.end_time"><i class="el-icon-success"></i></span>
                    <span class="stage-state" v-else><i class="el-icon-success"></i></span>
                  </template>
                </el-table-column>
              </elm-table-tree>
            </elm-page-tb>
          </template>

          <div>
            <el-form  size="small" label-width="100px">
              <div v-for="(item, index) in model.ins_stages" :key="index" v-if="item.id == postData.ins_stage_id">
                <elm-row>
                  <el-form-item label="开始时间" prop="start_time">
                    <el-date-picker v-model="item.start_time" value-format="yyyy-MM-dd" type="date"
                                    style="width: 100%"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间" prop="end_time">
                    <el-date-picker v-model="item.end_time" value-format="yyyy-MM-dd" type="date"
                                    style="width: 100%"></el-date-picker>
                  </el-form-item>
                </elm-row>
                <elm-row>
                  <el-form-item label="备注">
                    <el-input type="textarea" v-model="item.remark" :rows="2"></el-input>
                  </el-form-item>
                </elm-row>
                <elm-row>
                  <el-form-item label="附件">
                    <elm-upload module_name="biz_pmis_pj_stage_files" :rel_id="item.id" :multiple="false" :limit="10"  list-type="file" tip=""></elm-upload>
                  </el-form-item>
                </elm-row>

              </div>
            </el-form>
          </div>
        </elm-page-lr>
      </el-card>

      <template #bottom>
        <el-button type="success" size="small" @click="submit" model.>立即保存</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </template>
    </elm-page-bb>
  </div>

</template>

<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      filterText: '',
      postData: {ins_stage_id: null, name: null},
      model: {
        id: elm.dialog.request.pj_id,
        progress: elm.dialog.request.progress,
        b_edate: elm.dialog.request.b_edate,
        sys_code_key: elm.dialog.request.sys_code_key,
        ins_stages: []
      }
    }
  },
  created() {
  },
  methods: {
    loadData() {
      let treeList = this.$refs['tree'].datalist;
      this.model.ins_stages = elm.handleTreeToList(treeList);
      this.postData.ins_stage_id = this.model.ins_stages[0].id;
      this.postData.name = this.model.ins_stages[0].name;
    },
    rowClick(row) {
      this.postData.ins_stage_id = row.id;
      this.tablebinding();
    },
    async submit() {
      await this.$refs["model"].validate();
      if(this.model.progress>100)
        this.model.progress=100;
      else if (this.model.progress<0)
        this.model.progress=0;
      var res = await elm.post('/business/my/business/UpsertPjAndInsStage', this.model);
      if (res == true) {
        this.close();
        this.v('保存成功。');
        this.request.callVue.tablebinding();
      }
      else {
        this.error('保存失败，请稍后尝试。');
      }
    }
  }
}
</script>

<style>
.pj_stage .elm-page-bottom {
  padding: 0px !important;
  min-height: calc(100% - 2px) !important;
}

.pj_stage.elm-edit .yxjd .el-card__body {
  height: calc(100% - 52px);
}
.pj_stage .elm-fy .elm-body {
  padding: 0px 7px !important;
}
.pj_stage .elm-page-lr
{
  top:5px !important;
  left: 5px !important;
  right: 5px !important;
  bottom: 5px !important;
}
.pj_stage > .elm-fy > .elm-body > .el-card {
  margin: 7px 0px 0px;
}
</style>

<style scoped>

.stage-state {
  color: #c0c4cc;
  margin-left: auto;
}

.stage-state.active {
  color: #67c23a;
}
</style>